<!doctype html>
<html lang="en" class="no-js">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>BWO-WebForm Demo</title>
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/flick/jquery-ui.css" />
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/libs/modernizr.min.js?v=1.6"></script>
	</head>
	<body>
		<form id="form">
			<div id="tabs">
				<ul>
					<li>
						<a href="#tabs-1">HTML4</a>
					</li>
					<li>
						<a href="#tabs-2">HTML5</a>
					</li>
					<li>
						<a href="#tabs-3">Custom</a>
					</li>
					<li>
						<a href="#tabs-4">Examples</a>
					</li>
				</ul>
				<div id="tabs-1">
					<p>Simple 'text' input</p>
					<label for="html4_textField">text</label>
					<input type="text" id="html4_textField" /><hr/>
					<p>Simple 'password' input</p>
					<label for="html4_passwordField">
						password 
						<small>maxlength=30</small>
					</label>
					<input type="password" id="html4_passwordField" maxlength="30" /><hr/>
					<p>Simple 'file' input</p>
					<label for="html4_fileField">file</label>
					<input type="file" id="html4_fileField" /><hr/>
					<p>Simple select</p>
					<label for="html4_selectoneField">select-one</label>
					<select id="html4_selectoneField">
						<option value="">Blank</option>
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>
					<hr/>
					<p>Simple multi-select</p>
					<label for="html4_selectmultipleField">select-multiple</label>
					<select id="html4_selectmultipleField" multiple="multiple">
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>
					<hr/>
					<p>Simple textarea</p>
					<label for="html4_textareaField">textarea</label>
					<textarea id="html4_textareaField"></textarea>
					<hr/>
					<p>Simple Radio Button</p>
					<input type="radio" name="html4_radioField" id="html4_radioField" />
					<label for="html4_radioField">radio</label>
					<hr/>
					<p>Proper radio button groups should always be inside of a fieldset</p>
					<fieldset>
						<legend>Radio Group</legend>
						<ol>
							<li>
								<input type="radio" name="html4_radioGroup" id="html4_radioGroup1" />
								<label for="html4_radioGroup1">radioGroup1</label>
							</li>
							<li>
								<input type="radio" name="html4_radioGroup" id="html4_radioGroup2" />
								<label for="html4_radioGroup2">radioGroup2</label>
							</li>
						</ol>
					</fieldset>
					<hr/>
					<p>Simple Checkbox Button</p>
					<input type="checkbox" name="html4_checkboxField" id="html4_checkboxField" />
					<label for="html4_checkboxField">checkbox</label>
					<hr/>
					<p>Proper checkboxes should always be inside of a fieldset</p>
					<fieldset>
						<legend>CheckBox Group</legend>
						<ol>
							<li>
								<input type="checkbox" name="html4_checkboxGroup" id="html4_checkboxGroup1" />
								<label for="html4_checkboxGroup1">checkboxGroup1</label>
							</li>
							<li>
								<input type="checkbox" name="html4_checkboxGroup" id="html4_checkboxGroup2" />
								<label for="html4_checkboxGroup2">checkboxGroup2</label>
							</li>
						</ol>
					</fieldset>
					<hr/>
					<p>Hidden field here for testing to ensure it is excluded in form validation</p>
					<label for="html4_hiddenField">hidden</label>
					<input type="hidden" id="html4_hiddenField" /><hr/>
					<p>'submit','reset','image','button' inputs included to ensure it is excluded in form validation</p>
					<input type="submit" id="html4_submitField" value="Submit Input" /><input type="reset" id="html4_resetField" value="Reset Input" /><input type="image" id="html4_imageField" alt="Image Input" value="Image Input" /><input type="button" id="html4_buttonField" value="Button Input" /><hr/>
					<p>'submit','reset','button' buttons included to ensure it is excluded in form validation</p>
					<button type="submit" id="html4_submitBtnField">Submit Button</button>
					<button type="reset" id="html4_resetBtnField">Reset Button</button>
					<button type="button" id="html4_buttonBtnField">Button</button>
					<hr/>
				</div>
				<div id="tabs-2">
					<p>The pattern attribute brings RegExp into HTML. This example is to validate US Postal Codes, both 5 and 9 digit.</p>
					<label for="html5_textField1">
						text 
						<small>pattern=^\d{5}(-\d{4})?$</small>
					</label>
					<input type="text" id="html5_textField1" pattern="^\d{5}(-\d{4})?$" /><hr/>
					<p>The placeholder attribute is supported by some browsers. We fill in the gap for the others.</p>
					<label for="html5_textField2">
						text 
						<small>placeholder=Please enter some text</small>
					</label>
					<input type="text" id="html5_textField2" placeholder="Please enter some text" /><hr/>
					<p>You can now select multiple files on a single input file field. Limited browser support. We can't help you with that...yet.</p>
					<label for="html5_fileMultipleField">file-multiple</label>
					<input type="file" id="html5_fileMultipleField" multiple="multiple" /><hr/>
					<p>WebKit seems to be the only browsers that behaves differently for 'search' input type.</p>
					<label for="html5_searchField">search</label>
					<input type="search" id="html5_searchField" /><hr/>
					<p>I don't believe the 'tel' input type can do much for validation. I believe it is more for smartphones as a shortcut to their contacts.</p>
					<label for="html5_telField">tel</label>
					<input type="tel" id="html5_telField" /><hr/>
					<p>URL Validation included. Smartphones display a modified on-screen keyboard for 'url' input type.</p>
					<label for="html5_urlField">url</label>
					<input type="url" id="html5_urlField" /><hr/>
					<p>Email Validation included. Smartphones display a modified on-screen keyboard for 'email' input type.</p>
					<label for="html5_emailField">email</label>
					<input type="email" id="html5_emailField" /><hr/>
					<p>The new 'email' input type also allows the multiple attribute. TODO: What is the correct delimiter? - comma</p>
					<label for="html5_emailMultipleField">email-multiple</label>
					<input type="email" id="html5_emailMultipleField" multiple="multiple" /><hr/>
					<p>Validation TODO - NOTE: Opera and WebKit have 2 very different ways of displaying this.</p>
					<label for="html5_datetimeField">datetime</label>
					<input type="datetime" id="html5_datetimeField" /><hr/>
					<p>Validation TODO - easiest of date types to complete</p>
					<label for="html5_dateField">date</label>
					<input type="date" id="html5_dateField" /><hr/>
					<p>Validation TODO</p>
					<label for="html5_monthField">
						month 
						<small>required</small>
					</label>
					<input type="month" id="html5_monthField" required="required" /><hr/>
					<p>Validation TODO</p>
					<label for="html5_weekField">week</label>
					<input type="week" id="html5_weekField" /><hr/>
					<p>Validation TODO</p>
					<label for="html5_timeField">time</label>
					<input type="time" id="html5_timeField" /><hr/>
					<p>Validation TODO</p>
					<label for="html5_datetimelocalField">datetime-local</label>
					<input type="datetime-local" id="html5_datetimelocalField" /><hr/>
					<p>This field should only allow numerical input and throw validation errors on non-numerical data.</p>
					<label for="html5_numberField">number</label>
					<input type="number" id="html5_numberField" /><hr/>
					<p>In supported browsers, this displays a slider. Otherwise, this acts just like 'number' and should validate like 'number' as well.</p>
					<label for="html5_rangeField">
						range 
						<small>min=0 max=100 step=5</small>
					</label>
					<input type="range" id="html5_rangeField" min="0" max="100" step="5" /><hr/>
					<p>The 'color' input type only allows hexadecimal colors using full 6 digits and preceded by the pound '#' sign.</p>
					<label for="html5_colorField">color</label>
					<input type="color" id="html5_colorField" /><hr/>
					<p>Radio Button's allow required attribute</p>
					<input type="radio" name="html5_radioField" id="html5_radioField" required="required" />
					<label for="html5_radioField">radio</label>
					<hr/>
					<p>CheckBox Button's allow required attribute</p>
					<input type="checkbox" name="html5_checkboxField" id="html5_checkboxField" required="required" />
					<label for="html5_checkboxField">checkbox</label>
					<hr/>
					<label for="html5_selectoneField">
						select-one 
						<small>required</small>
					</label>
					<select id="html5_selectoneField" required="required">
						<option value="">Blank</option>
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>
					<hr/>
					<p>The textarea finally received the maxlength attribute, plus got the required attribute just like input.</p>
					<label for="html5_textareaField">
						textarea 
						<small>required maxlength=100</small>
					</label>
					<textarea id="html5_textareaField" required="required" maxlength="100"></textarea>
					<hr/>
				</div>
				<div id="tabs-3">
					<p>
						<strong>* Please note that in order to stay in compliance with W3C HTML5, all custom attributes need to be prefixed with data-.</strong>
					</p>
					<p>Multiple select elements need a min and max.</p>
					<label for="custom_selectmultipleField">
						select-multiple 
						<small>data-min=2 data-max=4</small>
					</label>
					<select id="custom_selectmultipleField" multiple="multiple" data-min="2" data-max="4">
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>
					<hr/>
					<p>We also added a minlength attribute.  Not sure why this is not in the spec. Very useful for password fields but can be used on any text input including the textarea</p>
					<label for="custom_passwordField">
						password 
						<small>data-minlength=8 maxlength=30</small>
					</label>
					<input type="password" id="custom_passwordField" data-minlength="8" maxlength="30" /><hr/>
					<label for="custom_textareaField">
						textarea 
						<small>data-minlength=10</small>
					</label>
					<textarea id="custom_textareaField" data-minlength="10"></textarea>
					<hr/>
					<p>Required validation added to the fieldset for radio button groups</p>
					<fieldset id="custom_radioGroup" data-required="required">
						<legend>
							Radio Group 
							<small>data-required</small>
						</legend>
						<ol>
							<li>
								<input type="radio" name="custom_radioField" id="custom_radioField1" />
								<label for="custom_radioField1">radio1</label>
							</li>
							<li>
								<input type="radio" name="custom_radioField" id="custom_radioField2" />
								<label for="custom_radioField2">radio2</label>
							</li>
							<li>
								<input type="radio" name="custom_radioField" id="custom_radioField3" />
								<label for="custom_radioField3">radio3</label>
							</li>
							<li>
								<input type="radio" name="custom_radioField" id="custom_radioField4" />
								<label for="custom_radioField4">radio4</label>
							</li>
							<li>
								<input type="radio" name="custom_radioField" id="custom_radioField5" />
								<label for="custom_radioField5">radio5</label>
							</li>
						</ol>
					</fieldset>
					<hr/>
					<p>Required, min, and max validation added to the fieldset for radio button groups</p>
					<fieldset id="custom_checkboxGroup" data-required="required" data-min="2" data-max="4">
						<legend>
							CheckBox Group 
							<small>data-required data-min=2 data-max=4</small>
						</legend>
						<ol>
							<li>
								<input type="checkbox" name="custom_checkboxField" id="custom_checkboxField1" />
								<label for="custom_checkboxField1">checkbox1</label>
							</li>
							<li>
								<input type="checkbox" name="custom_checkboxField" id="custom_checkboxField2" />
								<label for="custom_checkboxField2">checkbox2</label>
							</li>
							<li>
								<input type="checkbox" name="custom_checkboxField" id="custom_checkboxField3" />
								<label for="custom_checkboxField3">checkbox3</label>
							</li>
							<li>
								<input type="checkbox" name="custom_checkboxField" id="custom_checkboxField4" />
								<label for="custom_checkboxField4">checkbox4</label>
							</li>
							<li>
								<input type="checkbox" name="custom_checkboxField" id="custom_checkboxField5" />
								<label for="custom_checkboxField5">checkbox5</label>
							</li>
						</ol>
					</fieldset>
					<hr/>
				</div>
				<div id="tabs-4">
					<p>This example makes the input required only if you select the 'Other' option</p>
					<label for="example_source">How did you hear about us?</label>
					<select id="example_source" required="required">
						<option value="">Please make a selection</option>
						<option value="Internet">Internet</option>
						<option value="Other">Other</option>
					</select>
					<br/>
					<label for="example_sourceOther">If Other, please provide an answer.</label>
					<input type="text" id="example_sourceOther" /><hr/>
				</div>
			</div>
		</form>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>
		<script src="js/libs/jquery.cookie.js"></script>
		<script src="../bwo-webform.js"></script>
		<script src="js/script.js"></script>
	</body>
</html>
